<template>
  <el-form :inline="true" class="demo-form-inline" :model="cForm">
    <el-form-item label="一级分类">
      <!-- //!!!!el-select的值为el-option的label的值(前提是存在有v-model) -->
      <el-select
        placeholder="请选择"
        v-model="cForm.Category1id"
        @change="handle1"
        :disabled="!show"
      >
        <el-option
          :label="c1.name"
          :value="c1.id"
          v-for="(c1, index) in list1"
          :key="c1.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select
        placeholder="请选择"
        v-model="cForm.Category2id"
        @change="handle2"
        :disabled="!show"
      >
        <el-option
          :label="c2.name"
          :value="c2.id"
          v-for="(c2, index) in list2"
          :key="c2.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select
        placeholder="请选择"
        v-model="cForm.Category3id"
        @change="handle3"
        :disabled="!show"
      >
        <el-option
          :label="c3.name"
          :value="c3.id"
          v-for="(c3, index) in list3"
          :key="c3.id"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "CategorySelect",
  props: ["show"],
  data() {
    return {
      cForm: {
        Category1id: "",
        Category2id: "",
        Category3id: "",
      },
      list1: [],
      list2: [],
      list3: [],
    };
  },
  mounted() {
    this.getCategory1list();
  },
  methods: {
    //得到一级菜单商品
    async getCategory1list() {
      let result = await this.$API.attr.reqCategory1list();
      //   console.log( result,"一级菜单数据")
      if (result.code == 200) {
        this.list1 = result.data;
      }
    },
    //从一级中得到二级菜单商品
    async handle1() {
      this.cForm.Category2id = "";
      this.cForm.Category3id = "";
      this.list2 = [];
      this.list3 = [];
      let result = await this.$API.attr.reqCategory2list(
        this.cForm.Category1id
      );
      this.$emit("GetCategoryId", { id: this.cForm.Category1id, index: 1 });
      //   console.log(result, "二级菜单数据");
      if (result.code == 200) {
        this.list2 = result.data;
      }
    },
    //从二级中得到三级菜单商品
    async handle2() {
      this.cForm.Category3id = "";
      this.list3 = [];
      let result = await this.$API.attr.reqCategory3list(
        this.cForm.Category2id
      );
      this.$emit("GetCategoryId", { id: this.cForm.Category2id, index: 2 });

      //   console.log(result, "三级菜单数据");
      if (result.code == 200) {
        this.list3 = result.data;
      }
    },
    // 改变三级菜单是  触发的函数
    handle3() {
      this.$emit("GetCategoryId", { id: this.cForm.Category3id, index: 3 });
    },
  },
};
</script>

<style>
</style>